@import 'assets/stylesheets/gutenberg-base-styles';
@import '~@wordpress/base-styles/colors';
@import '../../mixins';
@import '../../variables.scss';

.gutenboarding-page.features {
	padding-bottom: $onboarding-footer-height;

	// TODO: This shouldn't be here. Find out why
	// this is blue in features page but black in others.
	.onboarding-title {
		color: var( --studio-gray-100 );
	}

	.onboarding-subtitle {
		// Just to make the 2nd sentence fall on second line.
		max-width: 620px;
	}
}

.features__header {
	@include onboarding-heading-padding;
	display: flex;
	justify-content: space-between;
}

.features__items {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: -12px;
}

.features__items > button.features__item.components-button.is-tertiary {
	border: 1px solid var( --studio-gray-5 );
	border-radius: 2px;
	width: calc( 100% - 24px );
	height: auto;
	min-height: 96px;
	margin: 12px;
	text-align: left;
	position: relative;
	padding: 16px;
	align-items: start;
	white-space: normal;
	color: var( --studio-gray-100 );
	transition: all 0.1s ease-in-out;

	&:hover:not( :disabled ) {
		box-shadow: none;
		border-color: var( --studio-gray-100 );
		color: var( --studio-gray-100 );
	}

	&.is-selected,
	&.is-selected:hover:not( :disabled ) {
		border-color: var( --studio-blue-40 );
		color: var( --studio-blue-40 );

		.features__item-description {
			color: var( --studio-blue-40 );
		}
	}

	@include break-small {
		width: calc( 50% - 24px );
	}

	@include break-xlarge {
		width: calc( 25% - 24px );
	}
}

.features__item-heading {
	padding-left: 10px;
}

.features__item-image {
	margin-top: 2px;
}

.features__item-name {
	font-size: $font-body;
	margin-top: 3px;
	margin-bottom: 8px;
}

.features__item-description {
	font-size: $font-body-small;
	line-height: 1.3;
	color: var( --studio-gray-40 );
	margin: 4px 0;
}
